<template>
  <div>
    <div class="mcc-body">
      <div class="my-pop">
        <span class="pop-text">每次查询将消耗您N惠币！目前您拥有：</span>
        <span class="pop-text blue">X惠币</span>
        <i class="icons help"></i>
      </div>
      <div class="title">MCC码查询</div>
      <div class="btn-group">
        <mt-button type="default" plain @click="$router.push({name: 'MccKnowledge'})">mcc常识</mt-button>
        <mt-button type="default" plain @click="$router.push({name: 'MultiScore'})">多倍积分</mt-button>
      </div>
      <div class="pos-r">
        <mt-search class="mcc-search" v-model="mccCode" @keyup.native.enter="getMcCode" placeholder="请输入4位MCC码或者15位商户编码"></mt-search>
        <mt-button type="default" class="ok-btn" :class="{disabled: !isOk}" @click.native="getMcCode"></mt-button>
      </div>
      <div class="page-cell" v-show="showList" ref="pageCell">
        <mt-cell v-show="codeCellShow">
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">收单机构：</span>
            <span class="right-title">{{mccInfo.vendor}}</span>
          </div>
        </mt-cell>
        <mt-cell v-show="codeCellShow">
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">地区代码：</span>
            <span class="right-title">{{mccInfo.province}}</span>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">商户类别：</span>
            <span class="right-title">{{mccInfo.type}} - {{mccInfo.small_type}}</span>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">商户费率：</span>
            <span class="right-title">统一0.6 (原{{mccInfo.old_fate}})</span>
          </div>
        </mt-cell>
        <mt-cell v-if="false">
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">详情描述：</span>
            <span class="right-title">{{mccInfo.desc}}</span>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">积分概况：</span>
            <span class="right-title">{{mccInfo.have_score}}</span>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="title" class="mcc-cell-title">
            <span class="left-title">无积分银行：</span>
            <span class="right-title">{{mccInfo.no_score}}</span>
          </div>
        </mt-cell>
        <mt-cell>
          <div slot="title" class="mcc-cell-title">
            <span class="left-title width-auto">促销/活动：</span>
            <span class="right-title" v-html="mccInfo.sales"></span>
          </div>
        </mt-cell>
        <mt-cell v-show="codeCellShow">
          <div slot="title" class="mcc-cell-title">
            <span class="left-title with-auto">
              招行黑户情况：
            </span>
            <span class="right-title table">
              <ul>
                <li v-for="(v, k) in mccInfo.months" :key="k">
                  <span>{{v}}</span>
                  <!-- <i class="icon" :class="{success: mccInfo.zhaohang_blist_month.indexOf(v) === -1, danger: mccInfo.zhaohang_blist_month.indexOf(v) !== -1}"></i> -->
                  <p v-if="mccInfo.zhaohang_blist_month === null">未命中黑名单</p>
                  <p>{{mccInfo.zhaohang_blist_month !== null && mccInfo.zhaohang_blist_month.indexOf(v) === -1 ? '未命中黑名单' : '命中黑名单，无积分'}}</p>
                </li>
              </ul>
            </span>
          </div>
        </mt-cell>
      </div>
      <mt-button type="default" :plain="true" class="dispute" :class="{fixed: ifFixed}" @click.native="showCorrection">我要纠错</mt-button>
      <correction ref="correction"></correction>
    </div>
  </div>
</template>

<script>
  import Correction from '@/components/Correction'
  import {Toast} from 'mint-ui'

  export default {
    name: 'Mcc',
    components: {
      Correction
    },
    data () {
      return {
        mccCode: '',
        showList: false,
        mccInfo: {},
        codeCellShow: false,
        ifFixed: true,
        isOk: false
      }
    },
    watch: {
      mccCode (mcc) {
        if (mcc === '') {
          this.showList = false
        }
        this.isOk = this.mccCode.length === 4 || this.mccCode.length === 15
      }
    },
    methods: {
      getMcCode () {
        if (this.mccCode === '') {
          msg('mcc不能为空')
          return false
        }
        if (this.mccCode.length === 4) {
          this.codeCellShow = false
        } else {
          this.codeCellShow = true
        }
        let params = {mcc: this.mccCode}
        this.showList = false
        const _this = this
        this.$post('/vue/mcc/get', params).then(function (data) {
          _this.showList = true
          _this.mccInfo = data
        })
      },
      showCorrection () {
        this.$refs.correction.popShow1 = true
        this.$refs.correction.column = 'Mcc - ' + this.mccCode
      }
    },
    updated () {
      let pageCell = this.$refs.pageCell.getBoundingClientRect()
      this.ifFixed = document.documentElement.clientHeight - (pageCell.height + pageCell.top) >= 90
    }
  }
  const msg = (m) => {
    Toast({
      message: m,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);

  .mcc-body{
    font-size: 0;
    background-color: #FFF;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url('/src/assets/mcc-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .my-pop {
      width: 100%;
      background-color: #fff688;
      display: none;
      .pop-text {
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
        line-height: 40px;
        color: @c-124;
        &.blue {
          color: #6cb8de;
        }
      }
      .icons {
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        &.help {
          background-image: url('/src/assets/icons/help-blue.png');
        }
      }
    }
    .title {
      color: #FFF;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-top: 24px;
    }
    .btn-group {
      padding: 16px 60px 24px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      button {
        flex: 0 0 47%;
        height: 32px;
        font-size: 13px;
        line-height: 24px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.1);
        color: @c-169;
      }
      
    }
    .mcc-search {
      height: auto;
      .mint-searchbar {
        background-color: transparent;
        padding: 0 12px;
        .mint-searchbar-inner {
          border: 1px solid #e2e2e2;
          border-radius: 26px;
          height: auto;
          padding: 4px 12px;
          .mintui-search:before {
            display: none;
          }
          .mint-searchbar-core {
            font-size: 12px;
            width: 88%;
            height: 38px;
            line-height: 100%;
          }
        }
        .mint-searchbar-cancel {
          display: none;
        }
      }
    }
    .pos-r {
      position: relative;
    }
    .ok-btn {
      position: absolute;
      bottom: 4px;
      right: 16px;
      z-index: 2;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: #6cb8de;
      background-image: url('/src/assets/icons/ok-white.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      &.disabled {
        background-color: #e2e2e2;
      }
    }
    .page-cell {
      padding-top: 24px;
      .mint-cell {
        margin: 0 12px;
        min-height: 32px;
        text-align: left;
        border-bottom: 1px solid #ebebeb;
        background-color: transparent;
        &:last-child {
          border: none;
          background: none;
        }
        .mint-cell-wrapper {
          color: #fff;
          font-size: 13px;
          line-height: 24px;
          padding: 0;
          background: none;
          .mcc-cell-title {
            overflow: hidden;
            .left-title {
              width: 25%;
              font-weight: bold;
              display: block;
              float: left;
              &.with-auto {
                width: auto;
              }
            }
            .right-title {
              width: 75%;
              display: block;
              float: left;
              &.table {
                width: 100%;
                margin-top: 8px;
                ul {
                  width: 100%;
                  display: block;
                  li {
                    display: flex;
                    padding: 8px;
                    font-size: 12px;
                    line-height: 24px;
                    color: @c-124;
                    background-color: #FFF;
                    text-align: center;
                    &:nth-child(odd) {
                      background-color: rgb(240, 244, 247);
                    }
                    span {
                      flex: 0 0 50%;
                      vertical-align: middle;
                    }
                    .icon {
                      flex: 0 0 auto;
                      width: 24px;
                      height: 24px;
                      margin: 0 10%;
                      display: inline;
                      vertical-align: middle;
                      background-repeat: no-repeat;
                      background-size: 100% 100%;
                      &.success {
                        background-image: url('/src/assets/icons/circle-success.png');
                      }
                      &.danger {
                        background-image: url('/src/assets/icons/circle-danger.png');
                      }
                    }
                    p {
                      flex: 0 0 50%;
                      display: inline;
                      vertical-align: middle;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .dispute {
      margin: 40px;
      width: 120px;
      height: 32px;
      font-size: 13px;
      line-height: 24px;
      border: 1px solid @c-169;
      border-radius: 16px;
      background-color: transparent;
      color: @c-169;
      &.fixed {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }
</style>